This example demonstrates how to use the client detail template in order to achieve three level hierarchy: Employees -> Orders -> OrderDetails with ajax binding.

Important notes:

1. Use the ClientTemplate method to set the client template (used only for ajax and web service binding scenarios).
2. Make sure the Name of any UI component defined in the template is unique. A property of the bound object can be used to ensure such uniqueness by utilizing client binding expressions: Name("Orders_<#= EmployeeID #>").
3. Calling the ToHtmlString method is required in order to output the contents of any UI components defined in the client detail template.
4. If the master grid is client bound (ajax or web service) so must be the child grids (defined in the client detail template).

Example:

<%= Html.Telerik().Grid<EmployeeViewModel>()
    .Name("Employees")
    .DetailView(details => details.ClientTemplate(
            Html.Telerik().Grid<OrderViewModel>()
                .Name("Orders_<#= EmployeeID #>")
                .DetailView(ordersDetailView => ordersDetailView.ClientTemplate(
                    Html.Telerik().Grid<OrderDetailsViewModel>()
                        .Name("OrderDetails_<#= OrderID #>")
                        .DataBinding(dataBinding => dataBinding.Ajax()
                            .Select("_OrderDetailsForOrderHierarchyAjax", "Grid", new { orderID = "<#= OrderID #>" }))
                        .Pageable()
                        .Sortable()
                        .ToHtmlString()
                 ))
                .DataBinding(dataBinding => dataBinding.Ajax()
                    .Select("_OrdersForEmployeeHierarchyAjax", "Grid", new { employeeID = "<#= EmployeeID #>" }))
                .Pageable()
                .Sortable()
                .ToHtmlString()
    ))
    .DataBinding(dataBinding => dataBinding.Ajax().Select("_EmployeesHierarchyAjax", "Grid"))
    .Pageable(paging => paging.PageSize(5))
    .Scrollable(scrolling => scrolling.Height(580))
%>